<template>
  <div>
          <!-- 弹框 -->
    <div class="comTitle clearfix">
      <div
        class="titleName fl"
        v-html="text1"
      ></div>
      <!-- 这里是弹框的右边 显示  通过  未通过  审核  -->
      <!-- 当传过来的tabNum ==0 的时候 加 status这个类   （点击的是 待审核 的时候）
          当穿过来的tabnum是  1  的时候  加   pass  这个类   （点击的是 已通过 的时候）
          当传过来的tabnum是  2 的时候  加  red这个  类   （点击的是 未通过 的时候）
       -->
      <!-- <div
        :class="{'fr':true,'status':tabNum==='0','pass':tabNum==='1','red':tabNum==='2'}"
        v-if="type!=='0'"
        v-html="statusList[tabNum]"
      ></div> -->
      <!-- 这里的 statusList[tabNum] 显示的是弹框右上角的  蓝色的  还是  绿色的  还是红色的-->
    </div>
    <!-- 企业信息审核里面  未通过选项  里面的 详情   跳出来的弹出框-->
    <div style="padding:0;">
      <div>
        <div class="title">图片信息</div>
        <ul class="info clearfix">
         
          <li :style=" 1===1  ? 'width: 100%':''">
            <div class="infoText licenseimg">
              <img
                :src="checkPicture"
                alt="认证凭证"
                width="100px"
                height="92px"
                @click="isShowMyImg"
              >
            
            </div>
          </li>
           <li>
            <div class="infoLabel">联系人：</div>
            <div
              class="infoText"
              v-html="username"
            ></div>
          </li>
          <li>
            <div class="infoLabel">服务网点地址：</div>
            <div
              class="infoText"
              v-html="area"
            ></div>
          </li>
        </ul>
      </div>
    </div>
     <div
        class="tabShow"
      >
        <div class="title">审核结果</div>
        <div style="height:40px;display: flex;align-items: center;">
          <el-radio-group
            v-model="result"
            style="padding:0 20px"
            @change="resultChange"
          >
            <!-- 这个change事件的回调 是 选中的 Radio label 值-->
            <!-- 当这个回调参数的值 ===1 的时候 说明是通过的，所以上传的 remark 的值为空，
                 如果这个回调参数的值 ===2 的时候，说明被驳回了，所以 会显示出 驳回的input框，然后把remark的值传回后台 -->
            <el-radio :label="'1'">通过</el-radio>
            <el-radio :label="'2'">驳回</el-radio>
          </el-radio-group>
          <el-input
            v-show="result==='2'"
            placeholder="驳回原因 :"
            v-model="remark"
            style="width:400px"
          ></el-input>
        </div>
        <div class="btnBox">
          <el-button @click="cancel">取消</el-button>
          <!-- 提交的时候触发这个 submit 这个事件 -->
          <el-button
            type="primary"
            @click="submit2"
          >提交</el-button>
        </div>
      </div>
  </div>
   
</template>
<script>
  export default {
    data(){
      return {
        text1:'线下求职服务网点',
        checkPicture: "https://tiandufacai-1259220846.cos.ap-shanghai.myqcloud.com/newimg/634771168229851136.jpg",
        area:"上海市闵行区顾戴路古美路100号",
        companytypename:'公司性质',
        legalperson:"沈锦峰",
        companysizename:'公司规模',
        industrytypename:'所属行业',
        username:'谢镔',
        telnum:'联系电话',
        linkphone:'企业联系电话',
        companyemail:'企业邮箱',
        remark:'',
        result:'1',
        checkHuman:''
      }
    },
  mounted() {
      this.checkHuman = localStorage.getItem("checkHuman").toString().replace(/"/g, '')
    },
  methods: {
    isShowMyImg() {},
    resultChange (r) {
      // 这个change事件的回调 是 选中的 Radio label 值
      // 当这个回调参数的值 ===1 的时候 说明是通过的，所以上传的 remark 的值为空，
      // 如果这个回调参数的值 ===2 的时候，说明被驳回了，所以 会显示出 驳回的input框，然后把remark的值传回后台
      if (r === "1") this.remark = "";
    },
    cancel () {
      this.$emit("cancelCheck", false);
    },
    submit2 () {
      if (this.result === "2" && !this.remark.trim()) {
        this.$message({
          message: "驳回原因不能为空",
          type: "warning"
        });
        return;
      }
      this.$confirm("是否确定提交？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {
            companyCode: this.companyId,
            checkState: this.result,
            causeOfFail: this.remark,
            checkHuman: this.checkHuman ? this.checkHuman : '李波'
          };
          // this.$axios
          //   .post("https://fcw.fcw-china.com:8443/electronic/contract/ChangeState", params)
          //   .then(res => {
          //     console.log(res)
          //     if (res.data.message === "更改成功") {
          //       if (this.result === "1") {
          //         // this.checkState = '1';
          //         this.$message({
          //           message: "审核成功!",
          //           type: "success"
          //         });
          //         // var currentDate = {
          //         //   reportid: this.companyId,
          //         //   status: 1,
          //         //   content: '同意'
          //         // }
          //         // this.$emit('reportCallback', currentDate)
          //       } else {
          //         // this.checkState = '2';
          //         this.$message({
          //           message: "申请已驳回!",
          //           type: "warning"
          //         });
          //         // var currentDate = {
          //         //   reportid: this.companyId,
          //         //   status: 2,
          //         //   content: this.remark
          //         // }
          //         // this.$emit('reportCallback', currentDate)
          //       }
          //       this.cancel();
          //     } else {
          //       this.$message({
          //         message: res.data.message,
          //         type: "error"
          //       });
          //       this.cancel();
          //     }
          //   });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
  },
}
</script>
<style scoped>
    .info li {
  float: left;
  /*width: 50%;*/
  padding: 10px 0;
}
.info{
  margin-left: 50px;
}



/* .info li:first-child {
  width: 100%;
} */

.info li:nth-child(2) {
  width: 100%;
}

/* li:nth-child(odd) {
  width: 50%;
}

li:nth-child(even) {
  width: 50%;
} */
li:last-child{
  margin-bottom: 30px;
}

.info li .infoLabel {
  color: #999;
  display: inline-block;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  float: left;
}



.info li .infoText {
  color: #404040;
  display: inline-block;
}

.info li .licenseimg1 {

  display: flex;
  flex-wrap: wrap;

}

.info li .licenseimg1 img {
  width: 86px;
  height: 86px;
  margin: 0 6px 6px 0;
}

.info li .infoLabel_left {
  float: left;
  line-height: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.info li .infoText_right {
  float: right;
  width: 482px;
  line-height: 19px;
}

.info li img {
  vertical-align: top;
}

.status {
  color: #0064e4 !important;
}

.pass {
  color: #19ae0e !important;
}

.red {
  color: #e60012 !important;
}

.btnBox {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.btnBox button {
  width: 120px;
  margin-right: 50px;
}

.company-introduction-content,
.infoTexty {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 20px;
}

.company-introduction-content {
  width: 80%;
}

.company-introduction-title {
  color: #999;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  line-height: 20px;
}

.company-introduction {
  overflow: hidden;
}

.tabShow {
  margin-top: 30px;
  padding-bottom: 20px;
}


.company-introduction-title1 {
  margin-top: 20px;
  padding: 10px 20px;
  border-top: 1px dashed #d2d2d2;
  font-size: 16px;
}

.company-introduction-title1>span:first-child {
  float: left;
}

.company-introduction-title1>span:last-child {
  float: right;
  color: #0064e4;
  cursor: pointer;
  border: 1px solid #0064e4;
  padding: 4px 6px;
}

.info1 li {
  float: left;
  /*width: 50%;*/
  padding: 10px 0;
}

.info1 li .infoLabel {
  color: #999;
  display: inline-block;
  width: 110px;
  text-align: right;
  margin-right: 10px;
  float: left;
}

.info1 li .infoText {
  color: #404040;
  display: inline-block;
}
.infoText img{
  margin-left:50px;
  margin-bottom: 10px;
}
</style>